<template>
    <div>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <ul class="hospital-ul clearfix b-g-f" v-if="list.length > 0">
                <router-link tag="li" :to="{name:'hospitalDetail',query:{id:item.id}}" class="hospital-li clearfix" v-for="(item,index) in list" :key="index">
                    <img class="hospital-img" :src="item.logo" alt="">
                    <div class="hospital-div">
                        <span class="hospital-name">{{item.name}}</span>
                        <span class="hospital-more">查看更多</span>
                        <span class="hospital-lvea">{{item.level}}</span>
                    </div>
                </router-link>
            </ul>
        </van-list>
    </div>
</template>
<script>
import { Toast } from 'vant';
export default {
    data(){
        return{
            page:0,
            list:[],
            loading:false,
            finished:false,
        }
    },
    mounted(){
        this.onLoad()
    },
    methods:{
        onLoad(){
            this.myHospitalForAgent()
        },
        // 医院列表
        myHospitalForAgent(){
            this.page++
            this.$api.dealers.myHospitalForAgent({page:this.page}).then(resp=>{
                if(resp.code == 1){
                    this.loading = false
                    if(resp.data.length > 0){
                        resp.data.forEach(e=>{
                            this.list.push(e)
                        })
                    }else{
                        this.finished = true
                    }
                }else{
                    Toast(resp.msg)
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.hospital-ul{
    margin-top: 30px;
    .hospital-li{
        padding: 30px 40px;
        border-bottom: solid 2px #f5f5f5;
        .hospital-img{
            width: 180px;
            height: 180px;
            float: left;
            border-radius: 20px;
        }
        .hospital-div{
            margin-left: 220px;
            span{
                display: block;
                overflow: hidden;
            }
            .hospital-name{
                height: 100px;
                line-height: 100px;
                font-size: 42px;
                font-weight: bold;
            }
            .hospital-more{
                text-align: right;
                height: 30px;
                line-height: 30px;
                font-size: 28px;
                color: #56a0ea;
            }
            .hospital-lvea{
                height: 50px;
                line-height: 40px;
                color: #999;
            }
        }
    }
}
</style>

